<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可用房间 - 酒店房间订阅系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
</head>
<body>
<div class="container">
    <header>
        <h1>可用房间</h1>
        <nav>
            <ul>
                <li><a href="${pageContext.request.contextPath}/hotel/">首页</a></li>
                <li><a href="${pageContext.request.contextPath}/hotel/bookings">预订管理</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <div class="rooms-grid">
            <c:forEach var="room" items="${rooms}">
                <div class="room-card">
                    <div class="room-card-content">
                        <h3>房间 ${room.roomNumber}</h3>
                        <div class="room-type">${room.roomType}</div>
                        <div class="room-price">¥<fmt:formatNumber value="${room.price}" pattern="#,##0.00"/>/晚</div>
                        <p>${room.description}</p>
                        <div style="margin-top: 1rem;">
                            <span class="room-status status-${room.status}">${room.status}</span>
                        </div>
                        <div style="margin-top: 1rem;">
                            <a href="${pageContext.request.contextPath}/hotel/book/${room.roomId}"
                               class="btn btn-primary">立即预订</a>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>

        <c:if test="${empty rooms}">
            <div class="alert alert-error">
                <p>暂无可用房间，请稍后再试。</p>
            </div>
        </c:if>
    </main>

    <footer>
        <p>&copy; 2025 酒店房间订阅系统. 保留所有权利.</p>
    </footer>
</div>
</body>
</html>
